/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-06-14 11:09:05
 * @LastEditors: cuidm
 * @LastEditTime: 2022-10-20 17:06:54
 */
import React, { useEffect, useState, Fragment } from "react";
import {
    Button,
    Modal,
    Spin,
    Drawer,
    message,
} from "antd";
import request from "@/utils/request";
import { ProDescriptions } from '@ant-design/pro-components';
import cmdbres from "@/data/cmdbres";
import "../index.less";

const DetailsModal = (props) => {
    const { visible, setVisible, info } = props;
    const [columns, setColumns] = useState([]);
    const [dataSource, setDataSource] = useState({});
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (visible && info) { 
            if(!info.uuid) {
                message.warning("实例UUID不存在，请检查数据源！");
                return;
            }
            
            if(!info.module?.cmModuleId) {
                message.warning("模型未获取到，请确认是否创建模型！");
                return;
            }
            queryTableHeaders();
            queryResourceDetail();
        }
    }, [visible])

    const queryResourceDetail = async () => {
        try {
            const res = await request({
                ...cmdbres.queryResourceList,
                data: {
                    cmModuleId: info.module.cmModuleId,
                    pageNumber:0,
                    pageSize: 0,
                    queryFilter:{
                        EQ: {
                            uuid: info.uuid,
                        }
                    },
                    sort: {
                        cm_create_time: 'DESC'
                    }
                },
            });
            if (res && res.code == 200 && res.data?.length) {
                setDataSource(res.data[0]);
            } else {
                message.warning("未查询到此数据，请确认数据是否已同步到CMDB！");
            }
        } catch (error) {
            console.log(error);
        }
    }

    const queryTableHeaders = async () => {
        setLoading(true);
        try {
            const res = await request({
                ...cmdbres.queryTableHeader,
                params: {
                    cm_module_id: info.module.cmModuleId
                },
            });
            const arr = [{
                key: 'cm_unid',
                title: 'ID',
                dataIndex: 'cm_unid',
                propertyKey:'cm_unid',
                propertyGroup: 'default',
            }]
            if (res && res.code == 200 && res.data && res.data.fields && res.data.fields.length) {
                let fieldData = res.data.fields.sort(function (a, b) { return a.propertyIndex - b.propertyIndex; });
                fieldData.map((item, index) => {
                    let field = {
                        ...item,
                        key: item.propertyKey,
                        title: item.unit ? `${item.propertyName}(${item.unit})` : item.propertyName,
                        dataIndex: item.propertyKey,
                        width: 130,
                        copyable: true,
                        ellipsis: true,
                    };
                    arr.push(field);
                });
            } 
            setColumns(arr);
            setLoading(false);
        } catch (error) {
            console.log("queryTableHeaders -> error", error);
        } 
    }

    return (
        <Drawer 
            className="drawer-table-columns detail-field"
            title={'查看详情'}
            placement={'right'}
            width={600}
            onClose={() => { setVisible(false) }}
            visible={visible}
            footer={null}
        >
            <Spin spinning={loading} style={{width: '100%', display: 'block'}}>
                <ProDescriptions
                    dataSource={dataSource}
                    columns={columns}
                    style={{ padding: "20px" }}
                >
                </ProDescriptions>
            </Spin>
            <div className="hcp-modal-body-footer">
                <Button onClick={() => { setVisible(false) }} type="primary">确定</Button>
            </div>
        </Drawer>
    )
}

export default DetailsModal;